<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="基础包名">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
    </el-form>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 70%"
      max-height="250">
      <el-table-column
        type="selection"
        width="70">
      </el-table-column>
      <el-table-column
        prop="tableSchema"
        label="库名"
        width="120">
      </el-table-column>
      <el-table-column
        prop="tableName"
        label="表名"
        width="120">
      </el-table-column>
      <el-table-column
        prop="tableRows"
        label="表记录数"
        width="120">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="120">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="120">
        <template >
          <el-button
            @click="getCloumn(tableData[0])"
            type="text"
            size="small">
            选择字段
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <preview-dialog ref="previewDialog"></preview-dialog>
  </div>
</template>
<script>
import { getTables,getClomun } from '@/api/auto/auto'
import PreviewDialog from './preview-dialog'
  export default {
    components:{
      previewDialog
    },
    name: 'Auto',
    data() {
      return {
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        previewObj: {
          isShow: false,
          id: ''
        },
        config: {
          top: '20vh',
          width: '500px',
          title: '温馨提示',
          center: true,
          btnTxt: ['取消', '提交'],
        },
        tableData: [],
        tableCloum: []
      }
    },
    created: function(){
      this.getAllTables()
    },
    methods: {
      open() {
        this.$refs.dialog.open(cancel => {
          // cancel();
          console.log('点击提交按钮了')
        })
        .then(() => {console.log(this.$refs.span)});   //这里就充分利用了open方法中返回的nextTick
      },
      beforeClose(){
        console.log('关闭前');
      },
      resetForm(){
        // 这里可以写重置表单的实现
      },
      getAllTables(){
        getTables().then(response => {
          const { data } = response
          this.tableData=data
        }).catch(error => {
          console.log(error)
        }
        )
      },
      getCloumn:function(row){
        this.$refs.previewDialog.open()
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      }
    }
  }

</script>